@import "../../../assets/css/common.scss";

.daily {
  &:hover {
    .tip {
      transform: translate(0);
    }
  }
  .tip {
    @apply absolute w-full h-12 flex flex-col justify-center px-2 
        bg-black bg-opacity-20 transition duration-300 delay-500 text-white text-12
        transform -translate-y-12 whitespace-nowrap z-10;
  }
}
.songList {
  @apply w-full flex flex-wrap max-w-5xl;
  .item {
    $size: calc(20% - 15px);
    width: $size;
    min-width: $size;
    margin: 0 15px 15px 0;

    .cover {
      @apply relative w-full h-0 rounded cursor-pointer overflow-hidden;
      padding-top: 100%;
      &:hover {
        .play {
          opacity: 0.9;
        }
      }
      .playCount {
        @apply absolute w-full flex items-center justify-end h-6 top-0 left-0 pr-1 text-white text-13 rounded-t z-10;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.2),
          rgba(0, 0, 0, 0)
        );
      }
      .play {
        @apply absolute right-3 bottom-3 w-8 h-8 bg-white rounded-full opacity-0 z-10 duration-700;
      }
    }
    .name {
      @include text-overflow(2);
    }
  }
}
